<template>
	<div>
		<div class="leave_message_container">
			<h1>留言版</h1>
			<el-input type="text" placeholder="请输入你的名字" v-model="messageBoard.author" maxlength="16" show-word-limit
				style="width: 50%;">
			</el-input>
			<div style="margin: 20px 0;background-color: aqua;"></div>
			<el-input type="textarea" placeholder="请输入留言" :autosize="{ minRows: 2, maxRows: 6}"
				v-model="messageBoard.message" show-word-limit>
			</el-input>
			<div style="margin: 20px 0;width: 200px;"></div>
			<el-button type="primary" plain @click="postMessage">留言</el-button>
			<el-divider></el-divider>
			<div style="margin-bottom: 10px;">
				<span>选择留言日期</span>
				<el-select v-model="value" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<el-table :data="messages" border style="width: 100%;height: 600px;">
				<el-table-column prop="id" label="序号" width="200">
				</el-table-column>
				<el-table-column prop="name" label="名字" width="100">
				</el-table-column>
				<el-table-column prop="message" label="留言" width="300">
				</el-table-column>
				<el-table-column prop="time"  label="留言时间" width="160">
					<template slot-scope="scope">
						<div class="order_details">
							<div class="order_details_createTime">{{ scope.row.time | formatDate }}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="reply" label="回复内容">
				</el-table-column>
			</el-table>
			<el-link type="primary" href="mailto:1954585880@qq.com@qq.com">联系我们-邮箱：1954585880@qq.com</el-link>
		</div>
	</div>
</template>

<script>
	import request from '../../../utils/axios/request';
	export default {
		name: "Home",
		data() {
			return {
				options: [{
					value: 'day',
					label: '最近一天'
				}, {
					value: 'week',
					label: '最近一周'
				}, {
					value: 'mounth',
					label: '最近一月'
				}, {
					value: 'year',
					label: '最近一年'
				}, {
					value: 'all',
					label: '全部'
				}],
				value: 'day',
				messageBoard: {
					author: '',
					message: ''
				},
				messages: [{
					id: '',
					name: '',
					message: '',
					time: '',
					reply: ''
				}]
			}
		},
		methods: {
			postMessage() {
				if (this.messageBoard.author === '') {
					this.$message.error('请输入你的名字');
					return
				}

				if (this.messageBoard.message === '') {
					this.$message.error('请输入留言');
					return
				}
				request({
					method: 'post',
					url: '/leaveMessage/add',
					data: {
						userId: '123', //此处从cookie中获取userId
						userName: this.messageBoard.author,
						lmText: this.messageBoard.message
					}
				}).then((res) => {
					console.log(res)
					if (res.data.code == 100) {
						alert("留言成功")
					}
				})
				// axios.get("http://localhost:8181/postMessage?author=" + this.messageBoard.author + "&message=" + this.messageBoard.message).then((t) => {
				//     if (t.data === 'success') {
				//         this.$message({
				//             message: '留言成功',
				//             type: 'success'
				//         });
				//     } else {
				//         this.$message.error('留言失败');
				//     }
				// })
			}
		},
		created() {
			request({
				method: 'get',
				url: '/leaveMessage/repliedLeaveMessage/' + 123
			}).then((res) => {
				console.log(res)
				var jsonObj = JSON.parse(JSON.stringify(res.data.data));
				// console.log(jsonObj)
				// console.log('阿八八八')
				for (var i = 0; i < jsonObj.length; i++) {
					jsonObj[i].id = jsonObj[i].leaveMessageId;
					jsonObj[i].name = jsonObj[i].userName;
					jsonObj[i].message = jsonObj[i].lmText;
					jsonObj[i].time = jsonObj[i].lmTime;
					jsonObj[i].reply = jsonObj[i].lmReply;
				}
				this.messages = jsonObj
			})
		}
	}
</script>
<style scoped>
	.leave_message_container {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
</style>